<template>
    <a-layout class="layoutView" >
        <!--空白页面-->
        <div v-if="showBlankView" class="form-img">
            <img :src="getImage('/image/formCustom/blankPage.png')"/>
            <span style="color: #777777">{{this.config.tips}}</span>
        </div>
        <div v-else>
            <form-solution-show ref="formView" :backfillParams="backfillParams" :key="solutionKey" :appId="appId" :alias="formAlias" :pkId="formPkId" :readOnly="readOnly" :params="params"></form-solution-show>
        </div>
    </a-layout>
</template>

<script>
/**
 * 自定义页面(表单)
 */
import {Util} from '@lowcode/jpaas-base-lib';
import FormCustomPublic from "../FormCustomPublic.js"
import BusEvent from "../BusEvent";
import {defineAsyncComponent} from "vue"
import PublicApi from "@/common/api/form/public.js"
export default {
    name: "formView",
    components: {
        FormSolutionShow:defineAsyncComponent(()=>import('@/views/modules/form/FormSolutionShow/FormSolutionShow.vue'))
    },
    props:{
        appId:''
    },
    mixins:[FormCustomPublic,BusEvent],
    data() {
        return {
            showBlankView:true,//显示空白页面
            formAlias:"",//表单方案别名
            formPkId:"",//表单主键
            readOnly:false,//只读
            params:"",//参数
            solutionKey:Util.randomId(),
            backfillParams:{},//回填参数
        }
    },
     created() {
         this.loadForm();
    },
    methods: {
        getData(){
          return this.$refs.formView.getFormData();
        },
         loadForm(args){
            if( !this.config || !this.config.alias){
                this.showBlankView=true;
                return ;
            }
            this.formAlias=this.config.alias;
            //通过自定义的事件
            if(args && args.type=="custom" && args.params){
                this.formPkId=args.params.pk;
                return;
            }
            if(this.config.typeSelection=='backfill'){
                 this.showBlankView = false
                 this.initBackfill(args)
            }else if(this.config.receive){
                let receive=this.config.receive;
                let _readOnly= receive.isRead?receive.isRead:"NO";
                this.readOnly=_readOnly=="YES";
                let mapping = [];
                let formData = {};
                //取路由参数
                let params=this.getRouterParams();
                if (receive.type == 'url' || !receive.type) {
                    if (receive.isPk == 'YES') {
                        mapping = Util.deepClone(receive.pkMapping);
                        if (mapping[0].valueSource == 'param'){
                            if (params[mapping[0].valueDef]) {
                                mapping[0].valueSource = 'fixedVar';
                                mapping[0].valueDef = params[mapping[0].valueDef];
                            } else if ( params[mapping[0].name]) {
                                mapping[0].valueSource = 'fixedVar';
                                mapping[0].valueDef = params[mapping[0].name];
                            }
                        }
                    } else {
                        mapping = Util.deepClone(receive.mapping);
                        for (let i = 0; i < mapping.length; i++) {
                            let o = mapping[i];
                            if (o.valueSource == 'param' && params[o.name] && o.valueDef) {
                                if(receive.isData=='YES'){
                                    formData[o.name]=params[o.name];
                                }
                                o.valueSource = 'fixedVar';
                                o.valueDef = params[o.name];
                            }
                        }
                    }
                } else {
                    if (!args) {
                        return;
                    }
                    if (receive.isPk == 'YES') {
                        mapping = Util.deepClone(receive.pkMapping);
                        if (mapping[0].valueSource == 'param' && args.params[mapping[0].valueDef]) {
                            mapping[0].valueSource = 'fixedVar';
                            mapping[0].valueDef = args.params[mapping[0].valueDef];
                        }
                    } else {
                        mapping = Util.deepClone(receive.mapping);
                        for (let i = 0; i < mapping.length; i++) {
                            let o = mapping[i];
                            if (o.valueSource == 'param' && args.params[o.valueDef]) {
                                if(receive.isData=='YES'){
                                    formData[o.name]=args.params[o.valueDef];
                                }
                                o.valueSource = 'fixedVar';
                                o.valueDef = args.params[o.valueDef];
                            }
                        }
                    }
                }
                let self = this;
                this.getParams(mapping,function(res){
                    if(receive.isPk == 'YES' ){
                        if(res.pk){
                            self.formPkId=res.pk;
                        }else {
                            self.formPkId="";
                        }
                    }
                    self.params=res;
                    self.showBlankView=false;
                    self.solutionKey=Util.randomId();
                })
            }
        },
         initBackfill(args){
            let backfill = this.config.backfill
            let mapping = Util.deepClone(backfill.mapping);
             let params=args?args.params:this.getRouterParams();
            let backfillMapping = [];
            mapping.forEach(res=>{
                let valueSourceList = ['fixedVar','script','constantVar']
                backfillMapping.push({
                    valueSource:res.valueSource=='param'?'fixedVar':res.valueSource,
                    name:res.fieldName,
                    valueDef:res.valueSource=='param'?params[res.valueDef]:res.valueDef,
                    idx_:res.idx_
                })
            })
             PublicApi.getParams(JSON.stringify(backfillMapping)).then(res=>{
                 this.backfillParams =res
             })
        },
        getImage(url) {
            return import.meta.env.JPAAS_BASE_URL + url;
        },
        /**
         * 处理页面定制公共事件
         * args:{
         *      //显示空表单
         *     showBlankView:true
         *     //外部调用表单的方法名
         *     method:"方法名"
         *     //数据
         *     data:外部传递的数据。
         * }
         * @param args
         */
        handPublicReceive(args){
            //处理自定义方法。
            let method=args.method;


            if(method ){

                let data=args.data;
                let rxForm_=this.$refs.formView;
                if(!rxForm_){
                    return;
                }
                let func=rxForm_.getFormVm()[method];
                if(!func){
                    this.$message.warn("请在当前组件中配置方法:" +method);
                    return;
                }
                if(data){
                    func(data);
                }
                else{
                    func();
                }
                return;
            }
            this.showBlankView=args.showBlankView ||false;
            if(this.showBlankView){
                return;
            }
            this.loadForm(args);
        },
    },
    watch: {},
}
</script>

<style scoped>
.layoutView{
    height: 100%;
    width: 100%;
    overflow-y: auto;
    background: white;
}
.form-img{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
}
</style>
